<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6.创建元素</title>
</head>

<body>
    <div id="main">
        <!-- p#box${段落内容$}*3 -->
        <p id="box1">段落内容1</p>
        <p id="box2">段落内容2</p>
        <p id="box3">段落内容3</p>
    </div>
</body>
<script>
    var div = document.getElementById('main');
    var div1 = document.createElement('div')
    var text = document.createTextNode('12343')
    var text1 = document.createTextNode('22222')
    //appendChild都是在末尾添加
    div1.appendChild(text)
    div1.appendChild(text1)
    div.appendChild(div1)
    //调整该元素的某一子元素的位置     把第一个参数对应元素放在第二个参数对应元素前面
    div.insertBefore(document.getElementById('box3'), document.getElementById('box2'))
    //替换指定元素  覆盖效果  前覆盖后
    div.replaceChild(div1, document.getElementById('box3'))
    //删除指定元素
    // div.removeChild(document.getElementById('box1'))
    //复制指定元素
    var newdiv = div.cloneNode(true)//true为深拷贝（自己及所有子元素） 默认false为浅拷贝（不拷贝子元素）
    console.log(newdiv)
    document.body.appendChild(newdiv)

</script>

</html>